<template>
<van-cell-group class="comment">
<!-- 总体评价情况 -->
<van-cell title="商品评价" :value="`好评率:${ state.replyChance }%`"></van-cell>
<!-- 标签切换区域 -->
<van-cell class="tags">
  <van-button
    size="small"
    :class="{ active : state.isSum }"
    @click="tagHandle('0')"
  >全部 ({{ state.sumCount }})</van-button>
  <van-button
    size="small"
    :class="{ active : state.isGood }"
    @click="tagHandle('1')"
  >好评 ({{ state.goodCount }})</van-button>
  <van-button
    size="small"
    :class="{ active : state.isIn }"
    @click="tagHandle('2')"
  >中评 ({{ state.inCount }})</van-button>
  <van-button
    size="small"
    :class="{ active : state.isPoor }"
    @click="tagHandle('3')"
  >差评 ({{ state.poorCount }})</van-button>
</van-cell>
<!-- 评价列表 -->
<div v-if="state.hasComment">
  <comment-item
    v-for="reply in state.commentList"
    :key="reply.id"
    :reply="reply"
  ></comment-item>
</div>
<!-- 没有评论数据时，进行空结构展会 -->
<van-empty
  v-else
  description="暂时还没有评价哦~"
></van-empty>
</van-cell-group>
</template>

<script setup>
import CommentItem from '@/components/CommentItem.vue'

const { productId } = defineProps({
  productId: {
    type: Object,
    required: true
  }
})

// 引入接口
import { getCommentByTag, getCommentCount } from '@/api/product'
import { computed, reactive } from '@vue/reactivity'

// 存储评论的相关数据
const state = reactive({
  // 存储所有个数信息
  commentCountS: {},
  // 通过计算属性。处理不同类别的评论个数
  goodCount: computed(() => state.commentCountS?.good_count || 0),
  poorCount: computed(() => state.commentCountS?.poor_count || 0),
  inCount: computed(() => state.commentCountS?.in_count || 0),
  sumCount: computed(() => state.commentCountS?.sum_count || 0),
  replyChance: computed(() => state.commentCountS?.reply_chance || 100),
  //存储评价信息
  commentList: [],
  // 控制显示的评论状态
  active: '0',
  // 通过计算属性，来进行不同类型状态的判断
  isSum: computed(() => state.active === '0'),
  isGood: computed(() => state.active === '1'),
  isIn: computed(() => state.active === '2'),
  isPoor: computed(() => state.active === '3'),
  // 判断是否存在评论
  hasComment: computed(() => state.commentList.length || 0)
})

// 请求商品信息
async function initReplyData () {
  const { data } = await getCommentCount(productId)
  if (data.status !== 200) { return }
  state.commentCountS = data.data
}
initReplyData()

// 请求指定类型的评价
async function initCommentByTag (type) {
  const { data } = await getCommentByTag(productId, { type })
  if (data.status !== 200) { return }
  state.commentList = data.data
}
//  0代表全部评价，1代表好评，2代表中评，3代表差评
initCommentByTag('0')

// 切换类别的点击事件
function tagHandle (tagkey) {
  state.active = tagkey
  // 发送新类型的评价请求
  initCommentByTag(tagkey)
}
</script>

<style lang="scss" scoped>
.tags {
  .van-button {
    border-radius: 15px;
    margin-right: 10px;
  }
  .active {
    background-color: #fbc546;
  }
}
</style>